<template>
	<view class="wp">
		<nav-public :title="'【门店付款】账单详情'" :background="'#9532E4'" :color="'white'"></nav-public>
		<view class="padding30">
		<view class="status" v-if="info.status==1">
			<image src="/static/order/ddhx.png" mode="widthFix"></image>
			<text>等待核销</text>
		</view>
		<view class="status" v-if="info.status==3&&info.iscomment==1">
			<image src="/static/order/xfcg.png" mode="widthFix"></image>
			<text>消费成功</text>
		</view>
		<view class="status" v-if="info.status==3&&info.iscomment==0">
			<image src="/static/order/ddpj.png" mode="widthFix"></image>
			<text>等待评价</text>
		</view>
		<view class="shopinfo">
			<view class="top">
				<view>营业时间</view>
				<view>{{info.saletime}}</view>
			</view>
			<view class="bottom">
				<view class="address clamp">{{info.supaddress}}</view>
				<view class="flex">
					<view>{{info.principalname}} {{info.principalmobile}}</view>
					<view class="imgs">
						<image src="/static/order/dianhua.png" mode="widthFix" @click="phoneCall(info.principalmobile)"></image>
						<image src="/static/order/address.png" mode="widthFix" @click="openMap"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="shopname" @click="$navTo('/pages/shoplist/shopgoods?id='+info.uid)">{{info.supname}} ></view>
			<view class="flex">
				<image :src="info.logo"></image>
				<view class="content">
					<view>支付成功</view>
					<view class="small">优惠买单</view>
				</view>
				<view class="price"><text class="small">￥</text>{{info.goodsprice}}</view>
			</view>
			<view class="hexiao" v-if="info.status==1">
				<image @longtap="saveImage" :src="info.checkthumb" mode="widthFix"></image>
				<view>出示券码，收银员需确认核销</view>
			</view>
			<view class="allhexiao" v-else>
				<view>券码信息</view>
				<view class="small">已使用</view>
			</view>
		</view>
		<view class="detail">
			<view class="item">
				<view class="left">订单编号</view>
				<view class="flex">
					<text>{{info.ordersn}}</text>
					<image src="/static/order/copy.png" mode="widthFix" @click="copy(info.ordersn)"></image>
				</view>
			</view>
			<!-- <view class="item">
				<view class="left">账单消费金额</view>
				<view>￥{{info.goodsprice}}</view>
			</view>
			<view class="item">
				<view class="left">支付身份</view>
				<view>{{info.isvip}}</view>
			</view>
			<view class="item">
				<view class="left">享受折扣</view>
				<view>{{info.vipdisconut}}</view>
			</view>
			<view class="item">
				<view class="left">优惠金额</view>
				<view>-￥{{info.vipdisconutprice}}</view>
			</view> -->
			<view class="item">
				<view class="left">总金额</view>
				<view>￥{{info.price}}</view>
			</view>
			<block v-if="info.status==-1">
				<view class="item">
					<view class="left">现金退回：</view>
					<view>￥{{info.money}}</view>
				</view>
				<view class="item">
					<view class="left">米券退回：</view>
					<view>{{info.micredit}}</view>
				</view>
			</block>
			<block v-else>
				<view class="item">
					<view class="left">现金支付：</view>
					<view>￥{{info.money}}</view>
				</view>
				<view class="item">
					<view class="left">米券支付：</view>
					<view>{{info.micredit}}</view>
				</view>
			</block>
			<view class="item">
				<view class="left">支付类型</view>
				<view>{{info.paytype}}</view>
			</view>
			<view class="item">
				<view class="left">付款时间</view>
				<view>{{info.paytime}}</view>
			</view>
			<view class="item" v-if="info.status==3">
				<view class="left">核销时间</view>
				<view>{{info.checktime}}</view>
			</view>
		</view>
		<view class="buttons">
			<!-- <button class="text_color" size="mini" @click="">投诉电话</button> -->
			<!-- <button size="mini" @click="areaShow=true">协商全额退款</button> -->
			<!-- <button class="text_color" size="mini" @click="" v-if="info.status==1">申请退款</button> -->
			<!-- <button class="text_color" size="mini" @click="$navTo('/pages/shoplist/shopgoods?id='+info.uid)" v-if="info.status==3">再来一单</button> -->
			<!-- <button class="bg" size="mini" @click="$navTo('/pages/order/evaluate?id='+info.id)" v-if="info.status==3&&info.iscomment==0">去评价</button> -->
		</view>
		<!-- <modal v-if="areaShow" title="退款原因" confirm-text="提交" cancel-text="取消" @cancel="cancelAdd"
			@confirm="confirmAdd">
			<input type="text" v-model="areaTxt" placeholder="请填写申请原因" class="intxt" />
		</modal> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {
					goodsprice: "",
					isvip: "",
					logo: "",
					ordersn: "",
					paytime: "",
					paytype: "",
					price: "",
					principalmobile: "",
					supname: "",
					tsmobile: '',
					vipdisconut: '',
					vipdisconutprice: 0,
					checktime:'',
					checkthumb:'',
					status:'',
				},
				areaShow: false,
				areaTxt: '',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getIno();
		},
		methods: {
			openMap(){
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.info.lat),
					longitude: parseFloat(that.info.lng),
					scale: 15,
					name: that.info.supname,
					address: that.info.address,
				});
			},
			saveImage() {
				var that = this;
				uni.showModal({
					title: '保存',
					content: '保存核销码？',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.info.checkthumb,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								}
							});
						}
					}
				});
			},
			getIno() {
				this.$axios('transLog/transDetail', "POST", 'bonus', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			copy(v) {
				uni.setClipboardData({
					data: v
				})
			},
			phoneCall(v) {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: v, //仅为示例
					fail(e) {
						that.$api.msg(e);
					}
				});
			},
			cancelAdd() {
				this.areaShow = false;
			},
			confirmAdd() {
				this.areaShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #FBF8FE;
	}
	.wp {
		// padding: 0 30rpx;
		padding-bottom: 140upx;
		background: #FBF8FE;
	}

	.status {
		font-size: 40rpx;
		color: #9532E4;
		display: flex;
		align-items: center;
		padding: 40rpx 0;
		font-weight: 600;
		image{
			width: 36rpx;
			margin-right: 10rpx;
		}
	}
	.shopinfo{
		background: #FFFFFF;
		border-radius: 12rpx;
		.top{
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #F8F8F8;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.bottom{
			padding: 10rpx 20rpx 24rpx;
			.address{
				font-size: 28rpx;
				color: #333333;
			}
			.flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
				.imgs{
					display: flex;
					align-items: center;
					image{
						width: 38rpx;
						margin-left: 40rpx;
					}
				}
			}
		}
	}
	.info{
		margin: 20rpx 0;
		background: #fff;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333333;
		border-radius: 12rpx;
		.shopname{
			line-height: 50rpx;
			font-weight: 600;
		}
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E9E9E9;
			padding-bottom: 20rpx;
			margin-top: 6rpx;
			image{
				width: 116rpx;
				height: 116rpx;
				border-radius: 14rpx;
			}
			.content{
				font-size: 24rpx;
				padding-left: 16rpx;
				flex: 1;
				color: #333333;
				.small{
					font-size: 20rpx;
					color: #999999;
					margin-top: 16rpx;
				}
			}
			.price{
				color: #AF141D;
				font-size: 36rpx;
				font-weight: 600;
				.small{
					font-size: 24rpx;
				}
			}
		}
		.hexiao{
			padding-top: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
			image{
				width: 230rpx;
				margin-bottom: 30rpx;
			}
		}
		.allhexiao{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
			font-weight: 600;
			.small{
				font-size: 24rpx;
				color: #999999;
				font-weight: 400;
			}
		}
	}
	.detail{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #333333;
			line-height: 2.8;
			align-items: center;
			.left{
				font-size: 28rpx;
				font-weight: 600;
			}
			.flex{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					margin-left: 14rpx;
				}
			}
		}
	}
	.buttons {
		background: #fff;
		display: flex;
		height: 110upx;
		position: fixed;
		left: 0;
		bottom: 0;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		z-index: 100;
		text-align: center;
		padding: 0 22rpx;
		button {
			height: 52rpx;
			padding: 0 30rpx;
			margin: 0 8rpx;
			letter-spacing: 1px;
			border-radius: 26rpx;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			line-height: 52rpx;
			white-space: nowrap;
			background: #fff;
		}
		.bg{
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			color: #fff;
		}
	}
</style>